<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序登录 -->
		<view class="login_ov">
			<view class="login_logo">
				<image src="./images/logo.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="login_form">
			<view class="login_but">
				微信一键登录
				<button open-type='getPhoneNumber' @getphonenumber="getPhoneNumber"></button>
			</view>
			<view class="login_but" style="background-color: transparent;color: #666;margin-top: 30rpx;" @click="leave">
				暂不登录
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- h5 app登录 -->
		<view class="login_ov">
			<view class="login_logo">
				<image src="./images/logo.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="login_form">
			<view class="login_form_item">
				<view class="login_form_item_img">
					<image src="./images/cellphone.png" mode="aspectFit"></image>
				</view>
				<view class="login_form_item_input">
					<input type="text" v-model.trim="phone" placeholder="请输入用户名"/>
				</view>
			</view>
			<view class="login_form_item">
				<view class="login_form_item_img">
					<image src="./images/tapered.png" mode="aspectFit"></image>
				</view>
				<view class="login_form_item_input">
					<input type="password" v-model.trim="password" placeholder="请输入密码"/>
				</view>
			</view>
			<view class="login_quick">
				<view class="login_quick_left">
					手机快捷登录
				</view>
				<view class="login_quick_right">
					忘记密码？
				</view>
			</view>
			<view class="login_but" @click="login_submit">
				登录
			</view>
			<view class="login_more">
				<view class="login_more_line"></view>
				<view class="login_more_text">
					更多登录方式
				</view>
				<view class="login_more_line"></view>
			</view>
			<view class="login_more_platform">
				<view class="login_more_platform_item" @click="wx_login">
					<image src="./images/wx.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="login_register">
				账号注册
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				password:'',
			};
		},
		methods:{
			msg(msg){
				uni.showToast({
					title:msg,
					icon:'none'
				})
			},
			// 账号密码登录
			login_submit(){
				if(this.phone.length==0){
					this.msg('请输入账号');
					return
				}
				if(this.password.length==0){
					this.msg('请输入密码');
					return
				}
				this.msg('登录成功');
			},
			leave(){
				uni.reLaunch({
					url:`/pages/index/index`
				})
			},
			// 小程序登录 手机号码授权
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					this.msg('授权失败');
				}
				var {encryptedData,iv} = e.detail, el = this;
				uni.login({
				    provider: 'weixin',
				    success: function(res) {
				        var code = res.code;
						uni.getUserInfo({
						   provider: 'weixin',
						   success: function(es) {
								xxx({//调接口传给后端，获取session_key
									encryptedData: es.encryptedData,
									iv: es.iv,
									js_code: code,
								}).then((a)=>{
									uni.showLoading({
										title:'登录中...'
									})
									XXXX({//获取到session_key，传给后端解密手机号登录   也可合并一个接口把所有参数传给后端
										encrypData: encryptedData,
										iv: iv,
										session_key: a.session_key,
									}).then((b)=>{
										uni.hideLoading();
										// el.$store.commit('setToken',b.data.token)
										// el.$store.commit('setUserInfo',b.data.user)
										el.msg('登录成功')
									})
								})
							}
						});     
				    },
				});
			},
			wx_login(){//h5或者APP微信登录
				// #ifdef H5
				//H5公众号一键登录
				window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${'appid'}&redirect_uri=${'回调全路径'}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
				// #endif
				// #ifdef APP-PLUS
				//APP微信一键登录
				var el=this;
				uni.getProvider({
				    service: 'oauth',
				    success: function(res) {
				          uni.login({
				            provider: 'weixin',
				            success: function (loginRes) {
								uni.showLoading({
								  title: "登录中..."
								})
								xxx({//调接口传给后端，获取用户信息
									access_token:loginRes.authResult.access_token,
									openid:loginRes.authResult.openid
								}).then((res)=>{
									uni.hideLoading();
									// el.$store.commit('setToken',res.data.token)
									// el.$store.commit('setUserInfo',res.data.user)
									el.msg('登录成功')
								})
				            }, 
				            fail:function(res){
								console.log(res)
								el.msg('获取微信用户信息失败,请重试!')
				            }
				        })
				    }
				});
				// #endif
			}
		}
	}
</script>

<style>
	.login_ov{
		overflow: hidden;
	}
	.login_logo{
		width: 160rpx;
		height: 160rpx;
		margin: 60px auto;
		text-align: center;
		overflow: hidden;
	}
	.login_logo image{
		width: 100%;
		height: 100%;
	}
	.login_form{
		width: 690rpx;
		margin: 0 auto;
	}
	.login_form_item{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		align-items: center;
	}
	.login_form_item_img{
		width: 30rpx;
		height: 38rpx;
		margin-left: 40rpx;
		margin-right: 20rpx;
	}
	.login_form_item_img image{
		width: 100%;
		height: 100%;
	}
	.login_form_item_input{
		width: 80%;
		height: 70rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
	.login_form_item_input input{
		width: 100%;
		height: 100%;
	}
	
	.login_quick{
		padding: 40rpx 0;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}
	.login_but{
		width: 100%;
		height: 80rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: #2b9939;
		border-radius: 999rpx;
		margin-top: 10rpx;
		position: relative;
	}
	.login_but button{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0rpx;
		top: 0rpx;
		opacity: 0;
	}
	.login_more{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 70rpx;
	}
	.login_more_line{
		width: 120rpx;
		height: 1px;
		background-color: #ddd;
		
	}
	.login_more_text{
		font-size: 28rpx;
		color: #999;
		margin: 0 30rpx;
	}
	.login_more_platform{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}
	.login_more_platform_item{
		width: 100rpx;
		height: 100rpx;
		margin: 0 30rpx;
	}
	.login_more_platform_item image{
		width: 100%;
		height: 100%;
	}
	.login_register{
		text-align: center;
		font-size: 14px;
		color: #df2520;
		margin-top: 20px;
	}
</style>
